<template>
  <div class="note-list">
    <h2>NOTES</h2>
    <div class="tab-container">
      <div class="tab notes">
        <button class="active">All Notes</button>
      </div>
      <div class="tab favorites">
        <button>Favorites</button>
      </div>
    </div>
    <n-list></n-list>
  </div>
</template>

<script type="text/ecmascript-6">
  import list from '../../components/list/list.vue'
  export default{
    components: {
      'n-list': list
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  @import "../../assets/sass/mixin.scss";

  .note-list {
    width: 300px;
    background: rgb(246,246,246);
    border-right:1px solid #ccc;
  }

  h2 {
    margin:0;
    padding:10px 0;
    text-align: center;
    border-bottom:1px solid #ccc;
  }

  .tab-container {
    padding-top:20px;
    @include flexbox();
    @include justify-content($value: center);
    .tab {
      button {
        width: 100px;
        height: 30px;
        color: #666;
        font-size: 14px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(204, 204, 204);
        @include border-reduia(3px);
        @include box-shadow(0, 2px, 5px, 0, outset, #ccc);
        outline: none;
        cursor: pointer;
        &.active {
          background: rgb(230, 230, 230);
        }
      }
    }
  }
</style>
